import { Link } from "@tanstack/react-router";
import { Button } from "./ui/button";
import UserButton from "./userButton";

const Sidebar = () => {
  const paths = [
    "/dashboard/home",
    "/dashboard/printing",
    "/dashboard/todoList",
    "/dashboard/todoList",
  ];

  const buttonLabels = ["123", "456",  "待办清单"];

  return (
    <aside className="h-dvh bg-blue-950 w-[150px] flex flex-col items-center pt-3">
      <div className="flex flex-col items-center gap-5">
        <UserButton />
        {paths.map((path, index) => {
          return (
            <Link key={index} to={path}>
              <Button className="w-32 mt-5 border-white border-2 bg-inherit hover:bg-pink-700 
                focus:bg-pink-700  font-bold transition-colors duration-300
              ">{buttonLabels[index]}</Button>
            </Link>
          );
        })}
      </div>
    </aside>
  );
};

export default Sidebar;
